<template>
  <div>
       Connection-State is: <em>{{connectionState}}</em>
       <deep-stream-record :ds="ds"></deep-stream-record>
       <deep-stream-events :ds="ds"></deep-stream-events>
       <deep-stream-rpc :ds="ds"></deep-stream-rpc>
  </div>
</template>
<script>
import deepstream from 'deepstream.io-client-js'
import DeepStreamRecord from './DeepStreamRecord.vue'
import DeepStreamEvents from './DeepStreamEvents.vue'
import DeepStreamRpc from './DeepStreamRpc.vue'
export default {
  components: {
    DeepStreamRecord,
    DeepStreamEvents,
    DeepStreamRpc
  },
  data() {
    return {
      connectionState: 'INITIAL'
    }
  },
  created() {
    this.ds = deepstream('wss://154.deepstreamhub.com?apiKey=97a397bd-ccd2-498f-a520-aacc9f67373c')
      .login()
      .on('connectionStateChanged', connectionState => {
        this.connectionState = connectionState
      })
  }
}
</script>
